<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Let's VGrid</title>

    <script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.easing.min.js"></script>
    <script type="text/javascript" src="vgrid/jquery.vgrid.min.js"></script>

    <style type="text/css">
        .item {
            background-color: #DDD;
            overflow-x: auto;
            overflow-y: auto;
            margin: 5px 5px 5px 5px;
            width: 200px;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#container").vgrid({
                easing: "easeOutQuint",
                useLoadImageEvent: true,
                useFontSizeListener: true,
                time: 400,
                delay: 20,
                wait: 500,
                fadeIn: {
                    time: 500,
                    delay: 50
                }
            });
        })
    </script>
</head>
<body>
<div id="container">
    <div class="item">
        <h3>Form</h3>

        <a href="masonry.html"><h1>Go to Masonry</h1></a>
    </div>
    <div class="item">
        <h3>Form Title</h3>

        <form>
            <table>
                <tr>
                    <td>Username:</td>
                    <td>
                        <input type="text" name="username"/>
                    </td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>
                        <input type="password" name="password"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="Login"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div class="item">
        <h3>Form Subject</h3>

        <p>
            例：widget_base_dimensions: [150, 150]
            那么每个元素块的宽/高分别为150px/150px
            注：元素块合并时的宽度并不只是两个元素块之和
            即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
            高度={data-sizey=”1″}=元素块X1==150*1=150px
        </p>
    </div>
    <div class="item">
        <h3>Content</h3>

        <form>
            <table>
                <tr>
                    <td>Username:</td>
                    <td>
                        <input type="text" name="username"/>
                    </td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>
                        <input type="password" name="password"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="Login"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div class="item">
        <h3>Paragraph</h3>

        <p>
            例：widget_base_dimensions: [150, 150]
            那么每个元素块的宽/高分别为150px/150px
            注：元素块合并时的宽度并不只是两个元素块之和
            即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
            高度={data-sizey=”1″}=元素块X1==150*1=150px
        </p>
    </div>
    <div class="item">
        <h3>Title</h3>

        <a href="index.html"><h1>Go to Gridster</h1></a>
    </div>
    <div class="item">
        <h3>Sentence</h3>

        <p>
            例：widget_base_dimensions: [150, 150]
            那么每个元素块的宽/高分别为150px/150px
            注：元素块合并时的宽度并不只是两个元素块之和
            即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
            高度={data-sizey=”1″}=元素块X1==150*1=150px
        </p>
    </div>
</div>

</body>
</html>